<template>
  <div class="app-container">
    <el-container class="HourlyQuantity" style="width:100%;height:810px;">
      <el-main class="right" style="width:82%;margin-left:10px;overflow:hidden;background:#fff">
        <div class="head" style="width:90%;height:40px;margin-left:30px">
          <el-button size="small" @click="addMore">批量新增</el-button>
        </div>
        <el-divider />
        <div style="width:90%;height:40px;margin-left:30px;padding: 5px 0;">
          <el-button
            size="small"
            type="primary"
            class="el-icon-plus"
            :disabled="disabled1"
            @click="addData"
          >新增</el-button>
          <el-button
            type="warning"
            size="small"
            class="el-icon-edit"
            :disabled="disabled1"
            @click="reviseData"
          >修改</el-button>
          <el-button
            type="success"
            size="small"
            class="el-icon-mobile"
            :disabled="disabled2"
            @click="saveData"
          >保存</el-button>
          <el-button
            type="danger"
            size="small"
            class="el-icon-back"
            :disabled="disabled2"
            @click="undoData"
          >撤销</el-button>
        </div>
        <el-divider />
        <div style="width:90%;height:290px;float:left;border:1px solid #f5f5f5;padding:50px 0px">
          <el-form
            ref="ruleForm"
            :model="ruleForm"
            :rules="rules"
            label-width="100px"
            class="demo-ruleForm"
            style="width:100%"
          >
            <el-form-item label="员工姓名" prop="UserName">
              <el-input v-model="ruleForm.UserName">
                <i slot="suffix" class="el-icon-search" @click="getEmployeesData" />
              </el-input>
            </el-form-item>
            <el-form-item label="产品名称" prop="ProductName">
              <el-input v-model="ruleForm.ProductName">
                <i slot="suffix" class="el-icon-search" @click="getProductData" />
              </el-input>
            </el-form-item>
            <el-form-item label="订单名称" prop="OrderName">
              <el-input v-model="ruleForm.OrderName">
                <i slot="suffix" class="el-icon-search" @click="getOrderData" />
              </el-input>
            </el-form-item>

            <el-form-item label="日期" prop="HourlyDate">
              <el-date-picker
                v-model="ruleForm.HourlyDate"
                type="date"
                placeholder="选择日期"
                style="width: 100%;"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
                :disabled="disabled"
              />
            </el-form-item>
            <el-form-item label="工时" prop="HourlyQuantity">
              <el-input
                v-model="ruleForm.HourlyQuantity"
                onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"
                :disabled="disabled"
                @change="computedTiming"
              />
            </el-form-item>
            <el-form-item label="产品规格" prop="Spec">
              <el-input v-model="ruleForm.Spec" :disabled="disabled" />
            </el-form-item>
            <el-form-item label="产品编号" prop="ProductCode">
              <el-input v-model="ruleForm.ProductCode" disabled />
            </el-form-item>
            <el-form-item label="人员编号" prop="UserCode">
              <el-input v-model="ruleForm.UserCode" disabled />
            </el-form-item>

            <el-form-item label="工时单价" prop="ManHourUnitPrice">
              <el-input v-model="ruleForm.ManHourUnitPrice" disabled />
            </el-form-item>

            <el-form-item label="订单编号" prop="OrderCode">
              <el-input v-model="ruleForm.OrderCode" disabled />
            </el-form-item>
            <el-form-item label="计时金额" prop="HourlyAmount">
              <el-input v-model="ruleForm.HourlyAmount" disabled />
            </el-form-item>
          </el-form>
        </div>
        <div style="float:left;height:290px;width:10%;text-align:center;padding:50px 10px">
          <el-button
            type="danger"
            size="small"
            class="el-icon-coordinate"
            style="width:80%;margin-bottom:10px;"
            :disabled="disabled3"
            @click="aduitData"
          >提交</el-button>
          <el-button
            type="info"
            size="small"
            class="el-icon-close"
            style="width:80%;margin:10px;"
            :disabled="disabled4"
            @click="cancelAduit"
          >撤审</el-button>
          <el-input v-model="user" style="margin:10px;width:80%" />
          <el-select
            v-model="operator"
            :clearable="true"
            style="margin:10px;width:80%"
            @change="selectOperator"
          >
            <el-option
              v-for="item in auitType"
              :key="item.index"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
        </div>
        <div style="width:100%;height:430px;border:1px solid #f5f5f5;clear:both;position:relative">
          <el-tabs v-model="activeName">
            <el-tab-pane label="计时工资" name="first">
              <generalTable
                ref="wageTable"
                :general-data="wageData"
                :tableHead="wageHead"
                @query="query"
                @tableRow="tableRow"
              ></generalTable>
            </el-tab-pane>
            <el-tab-pane v-if="show==1" label="批量新增" name="second">
              <div style="margin:10px 0 0 95px;float:left">
                <h5>请选择要录入的人员</h5>
                <el-table
                  ref="peopleTable"
                  :data="peopleData"
                  highlight-current-row
                  height="310px"
                  style="width:400px;overflow: auto;margin-top:10px"
                  border
                  @row-click="selectPeopleRow"
                >
                  <el-table-column type="selection" :reserve-selection="true" width="55" />
                  <el-table-column prop="index" label="序号" sortable width="80" />
                  <el-table-column prop="UserCode" label="人员编号" />
                  <el-table-column prop="UserName" label="员工姓名" width="140" />
                </el-table>
              </div>
              <div style="float:left;width:250px;margin-left:15px">
                <el-image :src="prompt" style="width:100%;margin-top:30px" />
                <br />
                <el-button
                  class="el-icon-check"
                  size="small"
                  style="margin-left:25px;color:#933EC5;border:2px solid #933EC5"
                  @click="AddMoreButton"
                >确定新增</el-button>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-main>
    </el-container>

    <el-dialog
      title="快捷搜索框"
      :visible.sync="Dialog"
      :show-close="false"
      width="65%"
      custom-class="customWidth"
    >
      <generalDialogTable
        v-if="open == 1"
        :radio="radio"
        :tableHead="employeesHead"
        :general-data="employeesData"
        @selectRow="selectRow"
      ></generalDialogTable>
      <generalDialogTable
        v-if="open == 2"
        :radio="radio"
        :tableHead="productHead"
        :general-data="productData"
        @selectRow="selectRow"
      ></generalDialogTable>
      <generalDialogTable
        v-if="open == 3"
        :radio="radio"
        :tableHead="orderHead"
        :general-data="orderData"
        @selectRow="selectRow"
      ></generalDialogTable>

      <div slot="footer" class="dialog-footer" style="margin-bottom:20px;">
        <el-button size="small" @click="cancel">取 消</el-button>
        <el-button size="small" type="primary" @click="sure">确定</el-button>
      </div>
    </el-dialog>
    <!-- 审核提示弹框 -->
    <el-dialog title="提示" :visible.sync="aduitDialog" width="30%">
      <span>确定要审核该条记录吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="aduitDialog = false">取 消</el-button>
        <el-button size="small" type="primary" @click="sureAduit">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="提示" :visible.sync="cancelAduitDialog" width="30%">
      <span>确定要撤销该条记录的审核吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="sureUndo">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 确定批量新增弹框 -->
    <el-dialog title="提示" :visible.sync="addMoreDialog" width="30%">
      <span>确定要批量新增这些人员的计时信息吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="addMoreDialog = false">取 消</el-button>
        <el-button size="small" type="primary" @click="sureAddMore">确 定</el-button>
      </span>
    </el-dialog>
    <div style=" clear:both;" />
  </div>
</template>

<script>
import prompt from '../img/img14.png'
import generalDialogTable from './components/generalDialogTable'
import generalTable from './components/generalTable'
export default {
  components: { generalDialogTable, generalTable },
  data () {
    return {
      remark: 1, // 区分是新增按钮还是修改按钮,默认是修改按钮
      disabled: true, // 控制页面一渲染就禁用input框
      disabled1: false, // 控制按钮的禁用
      disabled2: true, // 控制按钮的禁用
      disabled3: false, // 控制审核的禁用
      disabled4: true, // 控制撤审的禁用
      Dialog: false,
      aduitDialog: false,
      addMoreDialog: false,
      user: '', // 操作者
      operator: '',
      cancelAduitDialog: false,
      open: -1,
      radio: -1,
      currentRow: '',
      employeesData: [],
      employeesHead: [],
      productData: [],
      productHead: [],
      orderData: [],
      orderHead: [],
      peopleData: [],
      auitType: [
        { index: 1, name: '全部' },
        { index: 2, name: '已审核' },
        { index: 3, name: '未审核' },
        { index: 4, name: '本人审核' },
        { index: 5, name: '本人制单' },
        { index: 6, name: '全部禁用' }
      ],
      activeName: 'first',
      show: 0,
      wageData: [], // 工资表格
      wageHead: [], // 工资表头
      index: -1, // 当前行的索引
      prompt: prompt,
      ruleForm: {
        HourlyDate: '',
        UserName: '',
        UserCode: '',
        ProductCode: '',
        ProductName: '',
        Spec: '',
        OrderCode: '',
        OrderName: '',
        HourlyQuantity: '',
        ManHourUnitPrice: '',
        HourlyAmount: ''
      },
      rules: {
        ProductCode: [{ required: true, message: '产品编号是必填项', trigger: 'change' }],
        OrderCode: [{ required: true, message: '工序编号是必填项', trigger: 'change' }]
      }
    }
  },
  watch: {},
  mounted () {
    this.employeesHead.push(
      { label: '序号', property: 'index', width: '100' },
      { label: '员工编号', property: 'UserCode' },
      { label: '员工姓名', property: 'UserName' }
    )
    this.productHead.push(
      { label: '序号', property: 'index', width: '100' },
      { label: '产品编号', property: 'ProductCode' },
      { label: '产品名称', property: 'ProductName' },
      { label: '产品规格', property: 'Spec' }
    )
    this.orderHead.push(
      { label: '序号', property: 'index', width: '100' },
      { label: '订单编号', property: 'OrderCode' },
      { label: '订单名称', property: 'OrderName' }
    )
    this.wageHead.push(
      { label: '序号', property: 'index', width: '120' },
      { label: '日期', property: 'HourlyDate', width: '140' },
      { label: '人员编号', property: 'UserCode', width: '160' },
      { label: '员工姓名', property: 'UserName', width: '120' },
      { label: '产品编号', property: 'ProductCode', width: '140' },
      { label: '产品名称', property: 'ProductName' },
      { label: '产品规格', property: 'Spec', width: '120' },
      { label: '订单编号', property: 'OrderCode', width: '140' },
      { label: '订单名称', property: 'OrderName' },
      { label: '工时', property: 'HourlyQuantity', width: '120' },
      { label: '计时金额', property: 'HourlyAmount', width: '120' }
    )
  },
  created () {
    for (var i = 0; i < 67; i++) {
      this.employeesData.push({
        index: i,
        UserCode: i,
        UserName: '张三' + i,
        ManHourUnitPrice: i + 1
      })

      this.productData.push({
        index: i,
        ProductCode: i,
        ProductName: '张三' + i,
        Spec: '200*300'
      })

      this.peopleData.push({
        index: i,
        UserCode: '3780' + i,
        UserName: '小四' + i
      })

      this.orderData.push({
        index: i,
        OrderCode: i,
        OrderName: '订单' + i
      })
    }
    // eslint-disable-next-line no-redeclare
    for (var i = 0; i < 20; i++) {
      this.wageData.push({
        index: i,
        HourlyDate: '2020-7-08',
        UserName: '张珊',
        UserCode: i,
        ProductCode: i,
        ProductName: '产品' + i,
        Spec: '200*400',
        OrderCode: i,
        OrderName: '订单' + i,
        HourlyQuantity: i,
        ManHourUnitPrice: i,
        HourlyAmount: i
      })
    }
  },
  methods: {
    // 查询表格内数据
    query (value) {},
    // 批量新增
    addMore () {
      this.show = 1
      this.activeName = 'second'
    },
    // 批量新增按钮
    AddMoreButton () {
      this.addMoreDialog = true
    },
    // 确定批量新增
    sureAddMore () {
      if (this.$refs.peopleTable.selection.length !== 0) {
        const data = this.$refs.peopleTable.selection
        data.forEach(m => {
          this.wageData.splice(0, 0, {
            index: this.wageData.length + 1,
            UserCode: m.UserCode,
            UserName: m.UserName,
            HourlyDate: this.ruleForm.HourlyDate,
            ProductCode: this.ruleForm.ProductCode,
            ProductName: this.ruleForm.ProductName,
            Spec: this.ruleForm.Spec,
            OrderCode: this.ruleForm.OrderCode,
            OrderName: this.ruleForm.OrderName,
            HourlyQuantity: this.ruleForm.HourlyQuantity,
            ManHourUnitPrice: this.ruleForm.ManHourUnitPrice,
            HourlyAmount: this.ruleForm.HourlyAmount
          })
        })
        this.$refs.peopleTable.clearSelection()
        this.activeName = 'first'
      } else {
        this.$message({
          messge: '未选择人员'
        })
      }
      this.addMoreDialog = false
    },
    // 新增按钮
    addData () {
      this.remark = 0
      this.disabled = false
      this.disabled1 = true
      this.disabled2 = false
      this.$refs['ruleForm'].resetFields()
    },
    // 修改按钮
    reviseData () {
      this.disabled = false
      this.disabled1 = true
      this.disabled2 = false
    },
    // 输入计时算出计时金额
    computedTiming (val) {
      this.ruleForm.HourlyAmount = val * this.ruleForm.ManHourUnitPrice
    },
    // 保存按钮
    saveData: function () {
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          // 新增
          if (this.remark === 0) {
            const data = {}
            for (var name in this.ruleForm) {
              data[name] = this.ruleForm[name]
            }
            this.wageData.splice(0, 0, data)
            // 调用子组件的方法
            this.$refs.wageTable.childMethod()
          } else {
            // 修改
            for (var name2 in this.ruleForm) {
              this.wageData[this.index][name2] = this.ruleForm[name2]
            }
          }
          this.disabled = true
          this.disabled1 = false
          this.disabled2 = true
          this.remark = 1
        }
      })
    },
    // 撤销按钮
    undoData () {
      this.remark = 1
      this.disabled = true
      this.disabled1 = false
      this.disabled2 = true
      this.$refs['ruleForm'].resetFields()
      for (var name in this.ruleForm) {
        this.ruleForm[name] = this.wageData[this.index][name]
      }
    },
    // 点击查询人员
    getEmployeesData () {
      this.open = 1
      this.Dialog = true
    },
    // 选中数据
    selectRow (row, index) {
      this.currentRow = row
      this.radio = index
    },
    // 查询产品名称
    getProductData () {
      this.open = 2
      this.Dialog = true
    },
    // 查询订单
    getOrderData () {
      this.open = 3
      this.Dialog = true
    },
    // 弹框确定按钮
    sure: function () {
      this.disabled = false
      this.disabled1 = true
      this.disabled2 = false
      if (this.open === 2) {
        const ProductName = this.currentRow.ProductName
        console.log(ProductName)
        // 将产品名称传后后台带回该产品的所有工序赋值给processData
        const data = [
          {
            index: 0,
            ProcedureCode: '33',
            ProcedureName: '包装',
            Spec: '200*400',
            ProcedureUnitPrice: 30,
            ManHourUnitPrice: 25,
            LossUnitPrice: 1,
            DeductionDefectRate: 5,
            CostingUnit: '元'
          }
        ]
        this.processData = data
      }
      for (var name in this.currentRow) {
        this.ruleForm[name] = this.currentRow[name]
      }
      this.Dialog = false
      this.radio = -1
    },
    cancel () {
      this.currentRow = ''
      this.Dialog = false
      this.radio = -1
    },
    // 单击行选中
    tableRow (row) {
      this.index = row.indexes
      for (var name in this.ruleForm) {
        this.ruleForm[name] = row[name]
      }
    },
    // 单击选中人员
    selectPeopleRow (row) {
      this.$refs.peopleTable.toggleRowSelection(row)
    },
    // 审核按钮
    aduitData () {
      this.aduitDialog = true
    },
    // 确定审核
    sureAduit () {
      this.aduitDialog = false
    },
    // 选择操作者
    selectOperator (val) {
      if (val === '已审核' || val === '本人制单') {
        this.user = ''
        this.disabled3 = false
        this.disabled4 = true
      } else {
        this.user = '超级管理员'
        this.disabled3 = true
        this.disabled4 = false
      }
    },
    // 撤审按钮
    cancelAduit () {
      this.cancelAduitDialog = true
    },
    // 确定撤销审核
    sureUndo () {
      this.cancelAduitDialog = false
    }
  }
}
</script>
<style scoped>
.HourlyQuantity /deep/ aside {
  padding: 0 !important;
  line-height: 0 !important;
}
.HourlyQuantity /deep/ .el-main {
  padding: 0 !important;
  line-height: 0 !important;
  border-left: 2px solid #f5f5f5;
}
.HourlyQuantity /deep/ .el-table th {
  background: #b5bdc5;
  color: #fff;
}
.HourlyQuantity /deep/ .customWidth {
  margin-top: 5vh !important;
}
.right /deep/ .el-divider--horizontal {
  margin: 0;
}
.right /deep/ .el-form-item {
  margin-bottom: 10px;
  float: left;
}
.right /deep/ .el-table__body tr.current-row > td {
  background: #99caf9;
  color: #fff;
}
.right /deep/ .el-input--suffix .el-input__inner,
.right /deep/ .el-date-editor.el-input,
.right /deep/ .el-date-editor.el-input__inner,
.right /deep/ .el-input.is-disabled .el-input__inner,
.right /deep/ .el-input__inner {
  width: 176px;
}
.HourlyQuantity /deep/ .el-input__suffix-inner {
  cursor: pointer;
  color: red;
}
.right /deep/ .el-select .el-input--suffix .el-input__inner {
  width: 100%;
}
.HourlyQuantity /deep/ .el-dialog {
  margin-top: 5vh !important;
}
.head .el-button {
  background-color: #4ee5b0;
  border-color: #4ee5b0;
  color: #fff;
}
.right /deep/ .el-table .cell {
  text-align: center;
}
.right /deep/ .el-tabs__nav {
  margin-left: 30px;
}
.right /deep/ .el-select {
  width: 140px;
}
.right /deep/ .el-input--medium {
  width: 150px;
}
.right /deep/ .el-tabs__item {
  color: #004ef9 !important;
  cursor: pointer;
  font-size: 16px;
  width: 160px;
  height: 35px;
  font-weight: 700;
  text-align: center;
  padding-bottom: 5px;
  border-top: 2px solid #004ef9;
}
.right /deep/ .el-tabs__active-bar {
  background: #004ef9;
  width: 160px !important;
}
</style>
